<template>
  <el-table :data="words" style="width: 100%" @row-click="viewWordDetails" stripe>
    <el-table-column prop="word" label="单词" width="180" />
    <el-table-column prop="trans" label="翻译" />
    <el-table-column label="标签" width="150">
      <template #default="scope">
        <el-tag v-if="scope.row.ielst === 'YES'" type="success" size="small">雅思</el-tag>
        <el-tag v-if="scope.row.ok === 'YES'" type="primary" size="small">已掌握</el-tag>
        <el-tag v-if="scope.row.ok === 'NO'" type="info" size="small">未掌握</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" @click.stop="toggleWordStatus(scope.row)">
          {{ getToggleButtonText(scope.row.ok) }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'VocabularyTable',
  props: {
    words: {
      type: Array,
      required: true
    }
  },
  methods: {
    viewWordDetails(row) {
      this.$emit('view-word-details', row);
    },
    
    toggleWordStatus(word) {
      this.$emit('toggle-word-status', word);
    },
    
    getToggleButtonText(status) {
      return status === 'YES' ? '标记未掌握' : '标记已掌握';
    }
  }
};
</script>